<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      button {
          background-color: #9f86e5;
          color: #fff;
          padding: 10px 20px;
          border: none;
          border-radius: 5px;
      }

      button:active {
          outline-offset: 1px;
          outline: #efe6ff solid 2px;
          background-color: #c7b4fd;
      }

      ul {
          padding: 0;
      }

      li {
          list-style: none;
          padding: 10px 0;
      }
  </style>
</head>
<body>
<div>
  <button>点击发送请求</button>
  <ul></ul>
</div>
<script>
  const button = document.querySelector('button')
  button.addEventListener('click', async () => {
    const queryParams = new URLSearchParams({
      pname: '广东省',
      cname: '广州市'
    }).toString()
    const response = await fetch('http://hmajax.itheima.net/api/area?' + queryParams)
    const result = await response.json()
    document.querySelector('ul').innerHTML = result?.list?.map(area => `<li>${ area }</li>`).join('')
  })
</script>
</body>
</html>